<template>
  <div class="classPage">
    <van-sidebar v-model="active">
      <van-sidebar-item
        :title="item.cat_name"
        v-for="(item, index) in classList"
        :key="index"
      />
    </van-sidebar>
    <div class="count_right">
      <ul>
        <li v-for="(item, index) in classList[active]?.children" :key="index">
          <h4>{{ item.cat_name }}</h4>
          <van-grid :column-num="3">
            <van-grid-item
              v-for="(n,i) in item.children"
              :key="i"
              :icon="n.cat_icon"
              :text="n.cat_name"
              @click="$router.push(`/about?id=${n.cat_id}`)"
            />
          </van-grid>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import axios from "axios";
export default {
  setup() {
    const data = reactive({
      classList: [],
      active: 0,
    });
    axios
      .get("https://api-hmugo-web.itheima.net/api/public/v1/categories")
      .then((res) => {
        // console.log(res);
        data.classList = res.data.message;
      });
    return {
      ...toRefs(data)
    };
  },
};
</script>
<style lang="scss" scoped>
.classPage {
  height: 100vh;
  display: flex;
  overflow: hidden;
  .count_right {
    flex: 1;
    overflow: auto;
    h4{
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>